<template>
  <q-layout view="hHh lpR fFf" class="my-layout">
    <LayoutHeader :basicDataMenu="basicDataMenu" @basicClick="basicClick" @configClick="configClick" @messageClick="messageClick" />

    <LayoutMenu ref="layoutMenu" @changeFold="onFold" @changeMenuList="changeMenuList" :basicDataMenu="basicDataMenu" />

    <div class="page-wrapper" :style="{paddingLeft: menuList.length === 0 ? '0' : (fold ? '48px': '198px')}">
      <Footprint />
      <div class="scrollbar" :style="{minWidth: menuList.length === 0 ? '0' : `${minWidth - (fold ? 48 : 198)}px`}">
        <div class="page-bg content q-pa-lg scrollbar">
          <keep-alive :include="saveInfo">
            <router-view :key="$route.path"/>
          </keep-alive>
        </div>
      </div>
    </div>
  </q-layout>
</template>

<script>
import MESMIXIN from '../pages/factory/mine-message/components/mes-mixin.js'
import LayoutHeader from './components/LayoutHeader'
import LayoutMenu from './components/LayoutMenu'
import Footprint from './components/Footprint'
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { loadToken, translateToken } from 'yz-help'
import { getUser } from '../boot/home/user'

export default {
  name: 'MyLayout',
  mixins: [ MESMIXIN ],
  components: {
    LayoutHeader,
    LayoutMenu,
    Footprint
  },
  data () {
    return {
      minWidth: 1024, // 屏幕最小宽度
      fold: false,
      /**
       * 不缓存的页面
       * 消息列表，角色定义，本地和机床，本地和云端，机床和云端，派工，工时定额，计划进度，机台状态
       * **/
      saveElseInfo: ['message', 'roleDefine', 'localMachine', 'localCloud', 'deviceCloud',
        'dispatch', 'productionDispatch', 'hourNorm', 'planProgress', 'machine', 'machineDetail', 'company-indent'],
      reload: true,
      menuList: [],
      basicDataMenu: [] // 基础数据
    }
  },
  computed: {
    ...mapGetters([
      'footprint'
    ]),
    saveInfo () {
      const result = []
      this.footprint.forEach(item => {
        if (this.saveElseInfo.indexOf(item.desc) === -1) {
          result.push(item.desc)
        }
      })
      return result
    }
  },
  watch: {
    permissions () {
      this.changeMenu()
    }
  },
  created () {
    this.getInfo()
    this.getWebScoket()
  },
  methods: {
    ...mapActions([
      'getWebScoket'
    ]),
    getInfo () {
      // 解析token
      const token = loadToken()
      const info = translateToken(token)
      const authorities = info.authorities
      this.saveCommonInfo(info, authorities)
      const userId = info.user_id
      getUser(userId).then(res => {
        this.set_userPhoto(res.data.photoUrl)
      })
    },
    basicClick (link) {
      this.$refs.layoutMenu.setBasicSubMenu(link, Number(this.Enums.SYS_PERMISSION.SYS_MENU.value))
    },
    configClick (link) {
      this.$refs.layoutMenu.setBasicSubMenu(link, Number(this.Enums.SYS_PERMISSION.FACTORY_MENU.value))
    },
    messageClick (link) {
      this.$refs.layoutMenu.setBasicSubMenu(link, Number(this.Enums.SYS_PERMISSION.FACTORY_MENU.value), true)
    },
    // 打开关闭折叠按钮
    onFold (fold) {
      this.fold = fold
    },
    changeMenuList (menuList) {
      this.menuList = menuList
    },
    ...mapMutations({
      'set_userPhoto': 'SET_USERPHOTO' // 更改权限数组
    }),
    ...mapActions([
      'saveCommonInfo'
    ])
  }
}
</script>

<style scoped lang="stylus">
 .page-wrapper{
   transition: all 300ms ease-in;
   padding-top: 50px;
 }
 .page-bg {
   background-color #ECEFF6
 }
 .content {
   height calc(100vh - 90px)
   overflow: auto;
   border-radius 6px

   div:first-child {
     min-width 1280px
   }

   div:first-child::-webkit-scrollbar{
     width:8px;
     height:20px;
   }

   & > div {
     height 100%
   }
   .scrollbar::-webkit-scrollbar {
     width 8px
     height 8px
     background-color transparent
   }

   .scrollbar::-webkit-scrollbar-thumb {
     border-radius 4px
     background-color rgba(95, 119, 253, 0)
     transition background-color 500ms ease-in
   }
   .scrollbar:hover::-webkit-scrollbar-thumb {
     background-color rgba(95, 119, 253, .5)
   }

   //&:hover .q-table__middle::-webkit-scrollbar-thumb{
   //  background-color rgba(95,119,253,.5)
   //}

   .scrollbar::-webkit-scrollbar-track {
     //margin-left -6px
     padding-top 48px
     background-color transparent
     width 0
   }
 }
</style>
